<template>
  <div>
    <h1>买车页面</h1>
    <h3 style="color: #ff9900">
      <span>欢迎您!{{this.userReq.userName}}</span>
    </h3>

    <el-form :inline="true" :model="buyReq" class="demo-form-inline">

      <br>
      <el-form-item label="买车日期">
        <el-date-picker
          v-model="buyReq.buyTime" type="datetime"
          value-format="yyyy年MM月dd日:HH:mm:ss"
          placeholder="买车日期">
        </el-date-picker>
      </el-form-item>

      <br>
      <el-form-item label="买车金额">
        <el-input  v-model="buyReq.buyPrice" placeholder="买车金额" > </el-input>
        <span style="color: #ff9900">可买车金额:{{this.userReq.userBalance}}</span>
      </el-form-item>
      
      <br>
      <el-form-item label="还款计划">
        <el-select v-model="buyReq.periods" placeholder="请选择还款计划">
          <el-option label="12期" value="12"></el-option>
          <el-option label="24期" value="24"></el-option>
          <el-option label="36期" value="36"></el-option>
          <el-option label="48期" value="48"></el-option>
        </el-select>
      </el-form-item>

      <br>
      <el-form-item label="利率每期">
        <el-input v-model="buyReq.interestRate" placeholder="利率"></el-input>
      </el-form-item>

      <br>
      <el-form-item label="每期利息">
        <el-input v-model="buyReq.interest" placeholder="利息"></el-input>
      </el-form-item>




      <br>

      <el-button @click="purchaseBuy">提交购买</el-button>

    </el-form>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import axios from "axios";
  export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        userReq:{
          userName:''
        },

        buyReq:{
          buyPrice: '',
          periods: '',
          interestRate: '',
          interest: '',
        },
      };
    },
    //计算属性 类似于data概念",
    computed: {
      /**
       * 买车分期12期：每期15%
       * 买车分期24期：每期12%
       * 买车分期36期：每期8%
       * 买车分期48期：每期6%
       * @returns {string}
       */
      interestRate() {
        switch (this.buyReq.periods) {
          case '12':
            return '15%';
          case '24':
            return '12%';
          case '36':
            return '8%';
          case '48':
            return '6%';
          default:
            return '';
        }
      },
      interest() {
        const buyPrice = parseFloat(this.buyReq.buyPrice);
        const periods = parseInt(this.buyReq.periods);
        const annualRate = this.interestRate.replace('%', '') / 100;
        const monthlyRate = annualRate / 12;
        return (buyPrice * monthlyRate).toFixed(2);
      },
    },
    //监控data中的数据变化",
    watch: {
      'buyReq.periods': function () {
        this.buyReq.interestRate = this.interestRate;
        this.buyReq.interest = this.interest;
      },
    },

    //方法集合",
    methods: {
      // 购买
      purchaseBuy(){
        axios.post('/api/buy/buyBuildSava',this.buyReq).then(response => {
          if (response.data.code ==200){
            this.$message.success(response.data.msg)
          }else {
            this.$message.error(response.data.msg)
          }
        })
      },

      // 获取用户信息
      getUserInfo(){
        axios.post('/api/auth/userInfo').then(response=>{
          this.userReq=response.data.data
        })
      },
    },

    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.getUserInfo();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
